<template>
  <div class="solutions-page">
    <!-- 页面头部 -->
    <section class="page-header">
      <div class="container">
        <div class="header-content">
          <h1 class="page-title">解决方案</h1>
          <p class="page-description">
            基于深度行业理解，为不同领域客户提供专业化、定制化的技术解决方案
          </p>
        </div>
      </div>
    </section>

    <!-- 行业解决方案 -->
    <section class="industry-solutions">
      <div class="container">
        <h2 class="section-title">行业解决方案</h2>
        <div class="solutions-grid">
          <div 
            class="solution-card" 
            v-for="solution in industrySolutions" 
            :key="solution.id"
            @click="selectSolution(solution)"
            :class="{ active: selectedSolution?.id === solution.id }"
          >
            <div class="solution-icon">
              <el-icon><component :is="solution.icon" /></el-icon>
            </div>
            <h3 class="solution-title">{{ solution.title }}</h3>
            <p class="solution-brief">{{ solution.brief }}</p>
            <div class="solution-stats">
              <span class="stat-item">{{ solution.projects }}+ 项目</span>
              <span class="stat-item">{{ solution.clients }}+ 客户</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 解决方案详情 -->
    <section class="solution-detail" v-if="selectedSolution">
      <div class="container">
        <div class="detail-content">
          <div class="detail-info">
            <h2 class="detail-title">{{ selectedSolution.title }}</h2>
            <p class="detail-description">{{ selectedSolution.description }}</p>
            
            <!-- 核心特性 -->
            <div class="features-section">
              <h3 class="features-title">核心特性</h3>
              <div class="features-grid">
                <div class="feature-item" v-for="feature in selectedSolution.features" :key="feature.name">
                  <div class="feature-icon">
                    <el-icon><component :is="feature.icon" /></el-icon>
                  </div>
                  <div class="feature-content">
                    <h4 class="feature-name">{{ feature.name }}</h4>
                    <p class="feature-desc">{{ feature.description }}</p>
                  </div>
                </div>
              </div>
            </div>

            <!-- 技术优势 -->
            <div class="advantages-section">
              <h3 class="advantages-title">技术优势</h3>
              <ul class="advantages-list">
                <li v-for="advantage in selectedSolution.advantages" :key="advantage">
                  <el-icon><Check /></el-icon>
                  {{ advantage }}
                </li>
              </ul>
            </div>
          </div>

          <div class="detail-visual">
            <!-- 技术架构图 -->
            <div class="architecture-diagram">
              <h3 class="diagram-title">技术架构</h3>
              <div class="architecture-layers">
                <div 
                  class="layer" 
                  v-for="(layer, index) in selectedSolution.architecture" 
                  :key="layer.name"
                  :style="{ animationDelay: index * 0.1 + 's' }"
                >
                  <div class="layer-header">
                    <span class="layer-name">{{ layer.name }}</span>
                  </div>
                  <div class="layer-components">
                    <span 
                      class="component" 
                      v-for="component in layer.components" 
                      :key="component"
                    >
                      {{ component }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 成功案例 -->
    <section class="success-cases" v-if="selectedSolution">
      <div class="container">
        <h2 class="section-title">成功案例</h2>
        <div class="cases-grid">
          <div class="case-card" v-for="case_ in selectedSolution.cases" :key="case_.id">
            <div class="case-header">
              <h3 class="case-title">{{ case_.title }}</h3>
              <span class="case-industry">{{ case_.industry }}</span>
            </div>
            <p class="case-description">{{ case_.description }}</p>
            <div class="case-results">
              <div class="result-item" v-for="result in case_.results" :key="result.metric">
                <span class="result-value">{{ result.value }}</span>
                <span class="result-metric">{{ result.metric }}</span>
              </div>
            </div>
            <div class="case-technologies">
              <span class="tech-tag" v-for="tech in case_.technologies" :key="tech">
                {{ tech }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 技术栈展示 -->
    <section class="tech-stack">
      <div class="container">
        <h2 class="section-title">技术栈</h2>
        <div class="tech-categories">
          <div class="tech-category" v-for="category in techStack" :key="category.name">
            <h3 class="category-title">{{ category.name }}</h3>
            <div class="tech-items">
              <div class="tech-item" v-for="tech in category.technologies" :key="tech.name">
                <div class="tech-logo">
                  <img :src="tech.logo" :alt="tech.name" />
                </div>
                <span class="tech-name">{{ tech.name }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 咨询联系 -->
    <section class="consultation">
      <div class="container">
        <div class="consultation-content">
          <div class="consultation-text">
            <h2 class="consultation-title">需要定制化解决方案？</h2>
            <p class="consultation-description">
              我们的专家团队将为您提供专业的技术咨询和定制化解决方案设计
            </p>
            <div class="consultation-features">
              <div class="feature" v-for="feature in consultationFeatures" :key="feature">
                <el-icon><Check /></el-icon>
                <span>{{ feature }}</span>
              </div>
            </div>
          </div>
          <div class="consultation-actions">
            <el-button type="primary" size="large" @click="goToContact">
              立即咨询
            </el-button>
            <el-button size="large" @click="downloadBrochure">
              下载方案手册
            </el-button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  OfficeBuilding,
  ShoppingCart,
  Coin,
  School,
  Monitor,
  DataAnalysis,
  Setting,
  Shield,
  Lightning,
  CloudyAndSunny,
  Check
} from '@element-plus/icons-vue'

const router = useRouter()
const selectedSolution = ref<any>(null)

// 行业解决方案
const industrySolutions = [
  {
    id: 1,
    title: '制造业数字化',
    brief: '智能制造全流程数字化转型解决方案',
    icon: 'OfficeBuilding',
    projects: 150,
    clients: 80,
    description: '为制造企业提供从生产计划、设备管理到质量控制的全流程数字化解决方案，实现智能制造转型。',
    features: [
      {
        name: '生产管理系统',
        description: '实时监控生产进度，优化生产计划和资源配置',
        icon: 'Monitor'
      },
      {
        name: '设备物联网',
        description: '设备状态实时监控，预测性维护降低停机时间',
        icon: 'Setting'
      },
      {
        name: '质量追溯',
        description: '全流程质量管控，产品质量可追溯可分析',
        icon: 'DataAnalysis'
      },
      {
        name: '数据分析',
        description: '生产数据深度分析，为决策提供数据支撑',
        icon: 'DataAnalysis'
      }
    ],
    advantages: [
      '提升生产效率30%以上',
      '降低设备故障率50%',
      '减少质量问题40%',
      '优化库存管理，降低成本20%'
    ],
    architecture: [
      {
        name: '展示层',
        components: ['Web管理端', '移动APP', '大屏展示', '报表系统']
      },
      {
        name: '业务层',
        components: ['生产管理', '设备管理', '质量管理', '库存管理']
      },
      {
        name: '服务层',
        components: ['API网关', '微服务架构', '消息队列', '任务调度']
      },
      {
        name: '数据层',
        components: ['关系数据库', '时序数据库', '文件存储', '数据仓库']
      },
      {
        name: '设备层',
        components: ['PLC', '传感器', '工业网关', 'SCADA系统']
      }
    ],
    cases: [
      {
        id: 1,
        title: '某汽车零部件制造企业',
        industry: '汽车制造',
        description: '实施智能制造系统，实现生产全流程数字化管理',
        results: [
          { value: '35%', metric: '效率提升' },
          { value: '60%', metric: '故障减少' },
          { value: '25%', metric: '成本降低' }
        ],
        technologies: ['Vue3', 'Spring Boot', 'MySQL', 'Redis', 'MQTT']
      }
    ]
  },
  {
    id: 2,
    title: '电商平台',
    brief: '全渠道电商解决方案，支持B2B/B2C/O2O模式',
    icon: 'ShoppingCart',
    projects: 200,
    clients: 120,
    description: '构建完整的电商生态系统，支持多渠道销售、智能推荐、供应链管理等功能。',
    features: [
      {
        name: '多渠道销售',
        description: '支持PC、移动端、小程序等多渠道统一管理',
        icon: 'Monitor'
      },
      {
        name: '智能推荐',
        description: '基于AI算法的个性化商品推荐系统',
        icon: 'DataAnalysis'
      },
      {
        name: '供应链管理',
        description: '从采购到配送的全链路供应链管理',
        icon: 'Setting'
      },
      {
        name: '数据分析',
        description: '销售数据分析，用户行为分析，运营决策支持',
        icon: 'DataAnalysis'
      }
    ],
    advantages: [
      '支持高并发，日处理订单10万+',
      '智能推荐提升转化率30%',
      '供应链优化降低成本15%',
      '全渠道统一管理提升效率'
    ],
    architecture: [
      {
        name: '前端层',
        components: ['PC商城', '移动商城', '管理后台', '小程序']
      },
      {
        name: '网关层',
        components: ['API网关', '负载均衡', '限流熔断', '安全认证']
      },
      {
        name: '服务层',
        components: ['用户服务', '商品服务', '订单服务', '支付服务']
      },
      {
        name: '数据层',
        components: ['MySQL集群', 'Redis缓存', 'Elasticsearch', 'MongoDB']
      },
      {
        name: '基础设施',
        components: ['Docker容器', 'Kubernetes', '监控告警', 'CI/CD']
      }
    ],
    cases: [
      {
        id: 2,
        title: '某知名服装品牌电商平台',
        industry: '服装零售',
        description: '构建全渠道电商平台，实现线上线下一体化运营',
        results: [
          { value: '200%', metric: '销售增长' },
          { value: '45%', metric: '转化率提升' },
          { value: '30%', metric: '运营效率' }
        ],
        technologies: ['React', 'Node.js', 'MySQL', 'Redis', 'Elasticsearch']
      }
    ]
  },
  {
    id: 3,
    title: '金融科技',
    brief: '安全可靠的金融业务数字化解决方案',
    icon: 'Coin',
    projects: 80,
    clients: 45,
    description: '为金融机构提供风控管理、支付结算、资产管理等核心业务系统。',
    features: [
      {
        name: '风控系统',
        description: '实时风险评估，智能反欺诈，合规管理',
        icon: 'Shield'
      },
      {
        name: '支付系统',
        description: '高并发支付处理，多渠道支付接入',
        icon: 'Lightning'
      },
      {
        name: '资产管理',
        description: '投资组合管理，风险评估，收益分析',
        icon: 'DataAnalysis'
      },
      {
        name: '合规监管',
        description: '监管报送，合规检查，审计追踪',
        icon: 'Monitor'
      }
    ],
    advantages: [
      '99.99%系统可用性保障',
      '毫秒级风险决策响应',
      '支持千万级用户并发',
      '符合金融行业安全标准'
    ],
    architecture: [
      {
        name: '渠道层',
        components: ['网银系统', '手机银行', 'ATM接口', '第三方渠道']
      },
      {
        name: '应用层',
        components: ['账户管理', '支付结算', '风控引擎', '产品管理']
      },
      {
        name: '服务层',
        components: ['核心银行', '支付系统', '风控平台', '报表系统']
      },
      {
        name: '数据层',
        components: ['核心数据库', '数据仓库', '实时计算', '历史归档']
      },
      {
        name: '基础设施',
        components: ['双活机房', '安全防护', '监控运维', '灾备系统']
      }
    ],
    cases: [
      {
        id: 3,
        title: '某城商银行核心系统升级',
        industry: '银行业',
        description: '核心银行系统现代化改造，提升业务处理能力',
        results: [
          { value: '500%', metric: '处理能力' },
          { value: '99.99%', metric: '系统可用性' },
          { value: '80%', metric: '运维效率' }
        ],
        technologies: ['Java', 'Spring Cloud', 'Oracle', 'Redis', 'Kafka']
      }
    ]
  },
  {
    id: 4,
    title: '教育信息化',
    brief: '智慧教育全场景解决方案',
    icon: 'School',
    projects: 120,
    clients: 90,
    description: '为教育机构提供在线教学、学生管理、教务管理等全方位信息化解决方案。',
    features: [
      {
        name: '在线教学',
        description: '直播授课、录播回放、互动教学工具',
        icon: 'Monitor'
      },
      {
        name: '学生管理',
        description: '学籍管理、成绩分析、学习轨迹跟踪',
        icon: 'DataAnalysis'
      },
      {
        name: '教务管理',
        description: '排课系统、考试管理、资源调度',
        icon: 'Setting'
      },
      {
        name: '家校互通',
        description: '家长端应用、消息通知、学习报告',
        icon: 'CloudyAndSunny'
      }
    ],
    advantages: [
      '支持万人同时在线学习',
      'AI智能推荐学习内容',
      '多终端同步学习进度',
      '完整的教学数据分析'
    ],
    architecture: [
      {
        name: '终端层',
        components: ['学生端', '教师端', '家长端', '管理端']
      },
      {
        name: '应用层',
        components: ['教学系统', '学管系统', '教务系统', '考试系统']
      },
      {
        name: '服务层',
        components: ['用户服务', '课程服务', '直播服务', '消息服务']
      },
      {
        name: '数据层',
        components: ['业务数据库', '学习数据', '多媒体存储', '日志数据']
      },
      {
        name: '基础设施',
        components: ['CDN加速', '视频云', '消息推送', '数据分析']
      }
    ],
    cases: [
      {
        id: 4,
        title: '某知名培训机构在线教育平台',
        industry: '教育培训',
        description: '构建完整的在线教育生态，支持多种教学模式',
        results: [
          { value: '300%', metric: '学员增长' },
          { value: '95%', metric: '课程完成率' },
          { value: '40%', metric: '运营效率' }
        ],
        technologies: ['Vue3', 'Node.js', 'WebRTC', 'MongoDB', 'Socket.io']
      }
    ]
  }
]

// 技术栈
const techStack = [
  {
    name: '前端技术',
    technologies: [
      { name: 'Vue.js', logo: '/images/tech/vue.svg' },
      { name: 'React', logo: '/images/tech/react.svg' },
      { name: 'TypeScript', logo: '/images/tech/typescript.svg' },
      { name: 'Element Plus', logo: '/images/tech/element.svg' }
    ]
  },
  {
    name: '后端技术',
    technologies: [
      { name: 'Java', logo: '/images/tech/java.svg' },
      { name: 'Spring Boot', logo: '/images/tech/spring.svg' },
      { name: 'Node.js', logo: '/images/tech/nodejs.svg' },
      { name: 'Python', logo: '/images/tech/python.svg' }
    ]
  },
  {
    name: '数据库',
    technologies: [
      { name: 'MySQL', logo: '/images/tech/mysql.svg' },
      { name: 'Redis', logo: '/images/tech/redis.svg' },
      { name: 'MongoDB', logo: '/images/tech/mongodb.svg' },
      { name: 'Elasticsearch', logo: '/images/tech/elasticsearch.svg' }
    ]
  },
  {
    name: '云服务',
    technologies: [
      { name: 'Docker', logo: '/images/tech/docker.svg' },
      { name: 'Kubernetes', logo: '/images/tech/kubernetes.svg' },
      { name: 'AWS', logo: '/images/tech/aws.svg' },
      { name: '阿里云', logo: '/images/tech/aliyun.svg' }
    ]
  }
]

// 咨询特性
const consultationFeatures = [
  '免费技术咨询',
  '定制化方案设计',
  '专业团队支持',
  '7x24小时服务'
]

// 方法
const selectSolution = (solution: any) => {
  selectedSolution.value = solution
}

const goToContact = () => {
  router.push('/contactus')
}

const downloadBrochure = () => {
  // 下载方案手册逻辑
  console.log('下载方案手册')
}

// 初始化
onMounted(() => {
  // 默认选择第一个解决方案
  if (industrySolutions.length > 0) {
    selectedSolution.value = industrySolutions[0]
  }
})
</script>

<style scoped>
.solutions-page {
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 8rem 0 4rem;
  color: white;
  text-align: center;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.page-description {
  font-size: 1.2rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

/* 行业解决方案 */
.industry-solutions {
  padding: 6rem 0;
  background: white;
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.solution-card {
  background: white;
  border: 2px solid #f0f0f0;
  border-radius: 16px;
  padding: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.solution-card:hover,
.solution-card.active {
  border-color: #667eea;
  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.15);
  transform: translateY(-4px);
}

.solution-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.solution-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
}

.solution-brief {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.solution-stats {
  display: flex;
  gap: 1rem;
}

.stat-item {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.9rem;
}

/* 解决方案详情 */
.solution-detail {
  padding: 6rem 0;
  background: #f8fafc;
}

.detail-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.detail-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #333;
}

.detail-description {
  font-size: 1.1rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 3rem;
}

/* 核心特性 */
.features-section {
  margin-bottom: 3rem;
}

.features-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #333;
}

.features-grid {
  display: grid;
  gap: 1.5rem;
}

.feature-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.feature-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.feature-name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

.feature-desc {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* 技术优势 */
.advantages-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #333;
}

.advantages-list {
  list-style: none;
  padding: 0;
}

.advantages-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: #666;
}

.advantages-list li .el-icon {
  color: #67c23a;
}

/* 技术架构 */
.architecture-diagram {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.diagram-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 2rem;
  text-align: center;
  color: #333;
}

.architecture-layers {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.layer {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem;
  animation: slideInRight 0.6s ease-out;
}

.layer-header {
  margin-bottom: 1rem;
}

.layer-name {
  font-weight: 600;
  color: #333;
  font-size: 1rem;
}

.layer-components {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.component {
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 0.3rem 0.8rem;
  font-size: 0.9rem;
  color: #666;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 成功案例 */
.success-cases {
  padding: 6rem 0;
  background: white;
}

.cases-grid {
  display: grid;
  gap: 2rem;
}

.case-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.case-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.case-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
}

.case-industry {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.9rem;
}

.case-description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.case-results {
  display: flex;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.result-item {
  text-align: center;
}

.result-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #667eea;
  margin-bottom: 0.3rem;
}

.result-metric {
  color: #666;
  font-size: 0.9rem;
}

.case-technologies {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tech-tag {
  background: #f1f5f9;
  color: #64748b;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.9rem;
}

/* 技术栈 */
.tech-stack {
  padding: 6rem 0;
  background: #f8fafc;
}

.tech-categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
}

.tech-category {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.category-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #333;
}

.tech-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.tech-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.tech-item:hover {
  border-color: #667eea;
  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.1);
}

.tech-logo {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tech-name {
  font-weight: 500;
  color: #333;
}

/* 咨询联系 */
.consultation {
  padding: 6rem 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.consultation-content {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
}

.consultation-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.consultation-description {
  font-size: 1.1rem;
  opacity: 0.9;
  margin-bottom: 2rem;
}

.consultation-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.feature .el-icon {
  color: #67c23a;
}

.consultation-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .solutions-grid {
    grid-template-columns: 1fr;
  }

  .detail-content {
    grid-template-columns: 1fr;
  }

  .tech-categories {
    grid-template-columns: 1fr;
  }

  .consultation-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .consultation-features {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }

  .tech-items {
    grid-template-columns: 1fr;
  }

  .case-results {
    flex-direction: column;
    gap: 1rem;
  }

  .consultation-actions {
    width: 100%;
  }
}
</style>